<template>
  <div>
    <Card>
      <Row  @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="70">
          <FormItem label="关键字" prop="value">
            <Input
                type="text"
                v-model="searchForm.value"
                placeholder="请输入关键字"
                clearable
                style="width: 200px"
            />
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
            >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Form>
      </Row>
<!--      {{data}}-->
      <div class="art-card">
        <article-card v-for="(item, index) in data"
                      :key="index"
        :data="item">
          <template v-slot:action>
            <div class="action">
              <Dropdown>
                <a href="javascript:void(0)">
                  操作
                  <Icon type="ios-arrow-down"></Icon>
                </a>
                <template #list>
                  <DropdownMenu>
                    <DropdownItem @click.native="removeArticle(item.id)">删除</DropdownItem>
                  </DropdownMenu>
                </template>
              </Dropdown>
            </div>
          </template>
        </article-card>
      </div>
      <Row type="flex" justify="end" class="page">
        <Page
            :current="searchForm.pageNumber"
            :total="total"
            :page-size="searchForm.pageSize"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
        ></Page>
      </Row>
    </Card>

  </div>
</template>

<script>
import {deleteArticle, deleteComment, getArticleList} from "@/api/article/article";
import articleCard from "@/views/my-components/article/article-card";

export default {
  name: "article",
  components: {
    articleCard
  },
  data(){
    return {
      searchForm: {
        value: '',
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      data: [], // 表单数据
      total: 0, // 表单数据总数
      loading: false,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getDataList();
    },
    getDataList(){
      this.loading = true;
      getArticleList(this.searchForm).then(res => {
        this.loading = false;
        if(res.success){
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      })
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    changeSelect(e) {
      this.selectList = e;
    },
    removeArticle(id){
      console.log(id);
      let _this = this;
      _this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除该文章?",
        loading: true,
        onOk: () => {
          deleteArticle({id: id}).then(res => {
            if(res.success){
              _this.$Message.success("删除成功");
              _this.getDataList();
            }
            _this.$Modal.remove();
          })
        },
      });

    }
  }
}
</script>

<style lang="less">
  .art-card{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .action {
    position: absolute;
    right: 1%;
    top: 0px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 3px;
  }
</style>